<template>
	<view class="wanlfind-follow-container">
		<wanl-navbar :isBack="true" :background="{background: '#fff',}" :showGongNeng="true">
			<text
				slot="content"
				style="color: #000; width: 100%;padding-left: 20rpx;"
			>
				商家列表
			</text>
		</wanl-navbar>
		<view class="edgeInsetTop">
			<u-icon name="map" size="20" style="margin-right:18rpx"></u-icon>
			<view>{{city}}</view>
		</view>
		<wanl-empty src="find_default3x" text="暂无数据 !" v-if="dataList.length === 0"/>
		<view v-if="dataList.length > 0" class="wanlfind-follow-container__list">
			<view class="item padding-bj margin-bj bg-white" v-for="(item, index) in dataList" :key="item.id" @click="handleUser(item)" style="margin: 20rpx 0;">
				<view class="cu-avatar margin-right-bj" :style="{backgroundImage: `url(${$wanlshop.oss(item.avatar, 88, 88)})`}"></view>
				<view class="subject">
					<view class="info">
						<view v-if="item.isself == 1" style="font-size: 34rpx">
<!--							<view class="cu-tag sm wanl-bg-redorange radius margin-right-xs">自营</view>-->
							{{item.shopname}}
						</view>
						<view class="text-cut-2 margin-bottom-xs" v-else style="font-size: 34rpx">
<!--							<view class="cu-tag sm bg-gray radius margin-right-xs" v-if="item.state == 0">个人</view>-->
<!--							<view class="cu-tag sm wanl-bg-blue radius margin-right-xs" v-if="item.state == 1">企业</view>-->
<!--							<view class="cu-tag sm wanl-bg-orange radius margin-right-xs" v-if="item.state == 2">旗舰</view>-->
							{{item.shopname}}
						</view>
						<view class="wanl-gray-light text-sm text-cut" style="margin-top: 30rpx;display: flex;justify-content: flex-start;align-items: center">
							<u-icon name="map" :color="'#999999'" size="16" style="margin-right:4rpx;"></u-icon>
							<text>{{item.pointaddr}}</text>
						</view>
					</view>
					<view class="menu" style="display: flex;justify-content: flex-start;align-items: center;color: #FC6A24;">
						<u-icon name="map" size="16" :color="'#FC6A24'" style="margin-right:4rpx"></u-icon>
						<text>{{item.distance + item.level_unit}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="edgeInsetBottom"></view>
		<!-- 加载更多 -->
<!--		<uni-load-more :status="status" :content-text="contentText" />-->
	</view>
</template>

<script>
export default {
	data() {
		return {
			dataList: [],
			reload: false, //判断是否上拉
			current_page: 1, //当前页码
			last_page: 1, //总页码
			status: 'loading',
			contentText: {
				contentdown: '',
				contentrefresh: '疯狂加载中...',
				contentnomore: ''
			},
			city:'',
			address:'',
			myloaction:{},
			lng:'',
			lat:'',
			km:'10'
		}
	},
	onLoad() {
		this.getlocation()
	
	
	},
	methods: {
		async loadData() {
			await uni.request({
				url: '/wanlshop/shop/getNearbyShopList',
				method: 'POST',
				data: {
					km: this.km,
					lng:this.lng,
					lat:this.lat
				},
				success: res => {
					uni.stopPullDownRefresh();
					this.dataList = res.data; //数据 追加
					// console.log(1111,this.dataList );
					// this.current_page = res.data.current_page; //当前页码
					// this.last_page = res.data.last_page; //总页码
					// this.status = res.data.total == 0 ? 'noMore' : 'more';
				}
			});
		},
		handleUser(user_no) {
			this.$wanlshop.to(`/pages/apps/jinyuanbao/shangjia/merchantDetails?id=${user_no.id}&shop_img=${user_no.avatar}&shop_name=${user_no.shopname}&city=${user_no.pointaddr}&distance=${user_no.distance}&level_unit=${user_no.level_unit}`);
		},
		getlocation() {
			let that = this;
			AMap.plugin('AMap.Geolocation', function () {
				uni.showLoading({
					title: '系统正在定位'
				});
				var geolocation = new AMap.Geolocation({
					enableHighAccuracy: true, //是否使用高精度定位，默认:true
					// 设置定位超时时间，默认：无穷大
					timeout       : 10000,
					buttonPosition: 'RB', //定位按钮的停靠位置
					buttonOffset  : new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
					zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
				});
				geolocation.getCurrentPosition(function (status, result) {
					if (status == 'complete' && result.info == "SUCCESS" && result.position && result.position) {
						//这个地方的result，可能会出现报错：获得地理定位时间。得到ipLocation成功。获取地址失败，请检查您的密钥或网络。
						//可能是密匙申请错了，重新申请密匙，生成maps.js文件。
						console.log(result)
						uni.hideLoading();
						that.lat = result.position.lat;
						that.lng = result.position.lng;
						that.getNowPlaceFirst(`${result.position.lng}, ${result.position.lat}`);
					} else {
						uni.hideLoading();
						uni.showToast({
							title: '定位失败',
						});
						that.lat = '12.455412';
						that.lng = '123.455412';
						that.getNowPlaceFirst(`113.455412,12.455412`);
					}
				});
			});
		},
		getNowPlaceFirst(location) {
			var that = this;
			location = location.replace(/[ ]/g, '');
			console.log("===location",location)
			uni.request({
				url    : `https://restapi.amap.com/v3/geocode/regeo?key=${this.$wanlshop.config('amapkey')}&location=${location}`,
				method : 'GET',
				success: (res) => {
					let result = res.data;
					if (result.status == '1') {
						let tempObj     = result.regeocode;
						this.myloaction = {
							adcode      : tempObj.addressComponent.adcode,
							city        : tempObj.addressComponent.city,
							province    : tempObj.addressComponent.province,
							district    : tempObj.addressComponent.province + tempObj.addressComponent.city + tempObj.addressComponent.district,
							location,
							addressLocal: '我的位置',
							address     : tempObj.addressComponent.streetNumber.street + tempObj.addressComponent.streetNumber.number,
							id          : '',
							name        : '我的位置',
							poiaddress  : tempObj.addressComponent.province + tempObj.addressComponent.city + tempObj.addressComponent.district,
							poiname     : '我的位置',
							typecode    : ''
						}
						this.city = this.myloaction.district;
						console.log("this.city===",this.city)
						this.loadData();
					}
				},
				fail   : (err) => {
					uni.showToast({
						title: JSON.stringify(err),
						icon : 'none'
					})
				}
			})
		},
	}
	
}
</script>

<style lang="scss">
.wanlfind-follow-container {
	&__list {
		.item {
			display: flex;
			align-items: center;
			
			.cu-avatar {
				width: 220rpx;
				height: 160rpx;
				flex-shrink: 0;
				background-color: #f9f9f9;
				border-radius: 20rpx;
			}
			
			.subject {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				flex: 1;
				height: 160rpx;
				.info {
					max-width: 400rpx;
				}
				
				.menu {
					display: flex;
					align-items: center;
				}
			}
		}
	}
}
.edgeInsetTop{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 30rpx 30rpx;
	background: #fff;
	border-top: 2rpx solid #F8F8F8;
}
</style>